{% extends '__base__.html' %}

{% block title %}日志{% endblock %}
{% block beforehead %}
<style>
    blockquote {
        border-left: #eee solid 5px;
        padding-left: 20px;
    }

    ul li {
        line-height: 20px;
    }

    code {
        color: #D34B62;
        background: #F6F6F6;
    }
</style>
{% endblock %}
{% block content %}
<div class="container">
    {% if mode == 'list' or mode == 'view' %}
    <div class="row">
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mkdir">新建文件夹</button>
                <button type="button" class="btn btn-primary"
                    onclick="assign('{{ prefix }}/edit?path=/{{ path | join('/') }}')">新建文件</button>
                <button type="button" class="btn btn-primary export" data-path="/{{ path | join('/') }}">导出</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#import">导入</button>
            </div>
            <div class="btn-group mr-2 choose" style="margin-bottom: 1rem; display: none;" role="group"
                aria-label="Second group">
                <button type="button" class="btn btn-primary move" data-path="/{{ path | join('/') }}">移动</button>
                <button type="button" class="btn btn-primary delete" data-path="/{{ path | join('/') }}">删除</button>
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}?path=/{{ path | range_slice(0, loop.index) | join('/')}}">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
                <div class="custom-control custom-switch">
                    <label style="position: absolute;left: -30px;">list</label>
                    <input type="checkbox" class="custom-control-input" id="mode"
                        {% if mode == 'view' %}checked{% endif %}>
                    <label class="custom-control-label" for="mode">view</label>
                </div>
            </ol>
        </nav>
    </div>
    <div id="mkdir" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入文件名" aria-label="Recipient's username"
                        aria-describedby="basic-addon2">
                    <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="status" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="form-group">
                    <input type="text" class="form-control" name="path" readonly>
                    <div class="input-group">
                        <select class="custom-select" name="status">
                            <!-- <option selected>状态</option> -->
                            <option value="2">审核</option>
                            <option value="3">公开</option>
                        </select>
                        <div class="input-group-prepend">
                            <button class="btn btn-success input-group-append">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="move" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" name="newpath">
                    <button class="btn btn-success input-group-append">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="export" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <textarea style="height: 50vh" readonly></textarea>
            </div>
        </div>
    </div>
    <div id="import" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <textarea type="text" class="form-control" placeholder="输入导入数据"></textarea>
                    <button class="btn btn-success input-group-append">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="update" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="form-group">
                    <input type="text" class="form-control" name="path" readonly>
                    <select class="custom-select" name="status">
                        <!-- <option selected>状态</option> -->
                        <option value="2">审核</option>
                        <option value="3">公开</option>
                    </select>
                    <input type="text" class="form-control" name="name" placeholder="名称">
                    <input type="text" class="form-control" name="summary" placeholder="摘要">
                </div>
                <button class="btn btn-success text-center" data-path="/{{ path | join('/') }}">确定</button>
            </div>
        </div>
    </div>
    {% endif %}
    {% if mode == 'list' %}
    <div class="row">
        <div class="col-md pb-4 table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col" width="6%"><input class="total" type="checkbox"></th>

                        <th scope="col" width="50%">名称</th>
                        <th scope="col" width="10%">大小</th>
                        <th scope="col" width="10%">状态</th>
                        <th scope="col" width="24%">修改日期</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr class="fileitem" style="cursor: pointer;" data-path="/{{ path | join('/') }}/{{ item.name }}"
                        data-type="{{ item.content_type }}">
                        <td class="select"><input type="checkbox"></td>
                        {% if item.content_type == 'd' %}
                        <td class="tb-filename" data-url="" data-toggle="tooltip" data-placement="top"
                            title="{{ item.name }}">
                            <a href="{{ prefix }}?path=/{{ path | join('/') }}/{{ item.name }}&mode={{ mode }}"><i
                                    class="fa fa-folder-o mr-3 "></i>{{ item.name }}</a>
                        </td>
                        {% else %}
                        <td class="tb-filename" data-toggle="tooltip" data-placement="top" title="{{ item.name }}">
                            <a href="{{ prefix }}/view?path=/{{ path | join('/') }}/{{ item.name }}"><i
                                    class="fa fa-file-o mr-3 "></i>{{ item.name }}</a>
                        </td>
                        {% endif %}
                        <td>-</td>
                        <td>{{ item.status | status_filter }}</td>
                        <td>{{ item.updated_at }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
    {% if mode == 'view' %}
    <div class="row video-grid">
        {% for item in items %}
        <div class="colVideoList fileitem" style="cursor: pointer;" data-toggle="tooltip" data-placement="top"
            data-path="{{ item.path }}/{{ item.name }}" data-type="{{ item.content_type }}" title="{{ item.name }}">
            <div class="video-elem">
                <div class="display d-block">
                    <div class="scale"></div>
                    {% if item.content_type == 'd' %}
                    <div class="img" style="background-image: url('{{ static_url }}/app/folder.png')"></div>
                    {% else %}
                    <div class="img" style="background: url('{{ static_url }}/app/Blog.png');background-size: cover;">
                    </div>
                    {% endif %}
                    <input type="checkbox">
                </div>
                <a class="title text-sub-title mt-2 mb-3">{{ item.name }}</a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% if mode == 'list' or mode == 'view' %}
    <div id="popupRC" style="display:none;background-color: antiquewhite;width: 13em;" class="panel panel-primary">
        <!-- <div class="panel-heading ">Right Click Window</div> -->
        <div class="panel-body">
            <button class="dropdown-item open">打开</button>
            <button class="dropdown-item status">状态</button>
            <button class="dropdown-item export">导出</button>
            <button class="dropdown-item move">移动</button>
            <button class="dropdown-item delete">删除</button>
        </div>
    </div>
    {% endif %}

    {% if mode == 'detail' %}
    <div class="row">
        <div class="col-md-6 btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary"
                    onclick="location.assign('{{ prefix }}/edit?path=/{{ path | join('/') }}')"
                    data-path="/{{ path | join('/') }}">编辑</button>
                <button type="button" class="btn btn-primary export" data-path="/{{ path | join('/') }}">导出</button>
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page" data-toggle="tooltip" data-placement="top"
                    title="{{ item }}">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}?path=/{{ path | range_slice(0, loop.index) | join('/')}}">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
            </table>
        </nav>
    </div>
    <div id="export" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <textarea style="height: 50vh" readonly></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="edit" class="col-6" style="display:none;height: 50vh;background-color: rgb(251, 241, 227);">
            <textarea name="content"
                style="width: 100%;height: 100%;resize: none;">{% if item.content %}{{ item.content }}{% endif %}</textarea>
        </div>
        <div id="view" class="col-12"
            style="height: 50vh;background-color: rgba(153, 245, 191, 0.98);overflow-y: scroll;"></div>
        <input class="col-7 mt-1" name="name" placeholder="日志名称" disabled {% if item.name %}value="{{ item.name }}"
            {% endif %}>
        <textarea class="col-7 mt-2" name="summary" cols="3" placeholder="摘要" style="resize: none;"
            disabled>{% if item.summary %}{{ item.summary }}{% endif %}</textarea>
    </div>
    {% endif %}
    {% if mode == 'edit' %}
    <div class="row">
        <div class="col-md-6 btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" id="save" class="btn btn-primary" data-path="/{{ path | join('/') }}">
                    <span class="spinner-border spinner-border-sm" style="display: none;" role="status"
                        aria-hidden="true"></span>
                    保存</button>
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item_ in path %}
                {% if loop.last and item.id %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}/view?path=/{{ path | range_slice(0, loop.index) | join('/')}}">{{ item_ }}</a>
                </li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}?path=/{{ path | range_slice(0, loop.index) | join('/')}}">{{ item_ }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
    </div>
    <div class="row">
        <div id="edit" class="col-6" style="height: 50vh;background-color: rgb(251, 241, 227);padding: 0;">
            <textarea name="content"
                style="width: 100%;height: 100%;resize: none;">{% if item.content %}{{ item.content }}{% endif %}</textarea>
        </div>
        <div id="view" class="col-6"
            style="height: 50vh;background-color: rgba(153, 245, 191, 0.98);overflow-y: scroll;"></div>
        <input class="col-7 mt-1" name="name" placeholder="日志名称" {% if item.name %} value="{{ item.name }}" {% endif %}>
        <textarea class="col-7 mt-2" name="summary" cols="3" placeholder="摘要"
            style="resize: none;">{% if item.summary %}{{ item.summary }}{% endif %}</textarea>
        {% if item.id %}
        <input type="hidden" name="id" {% if item.id %}value="{{ item.id }}" {% endif %}>
        {% endif %}
    </div>
    {% endif %}
    {% endblock %}

    {% block beforebody %}
    <script src="{{ static_url }}/showdown/showdown.js"></script>
    <script>
        function text2html(text) {
            let converter = new showdown.Converter();
            return converter.makeHtml(text);
        }
        document.querySelectorAll('main a').forEach(el => {
            el.addEventListener('click', function (event) {
                event.preventDefault();
                assign(el.href)
            }, false)
        })
        function assign(path) {
            if ((path.indexOf('?') >= 0 ? path.split('?')[0] : path).endsWith('{{ prefix }}') && path.indexOf('&mode=') == -1) {
                // if (path.indexOf('{{ prefix }}?path=') >= 0 && path.indexOf('&mode=') == -1) {
                location.assign(path + '&mode=' + get_cookie('mode'))
            } else {
                location.assign(path)
            }
        }
        let prefix = '{{ prefix }}'
        let content_type = '{{ prefix }}'.slice(1)
        let cur_path = '{{ path | join("/") }}'
        // {% if mode == 'list' or mode == 'view' %}
        set_cookie('mode', '{{ mode }}')
        $(".fileitem").bind('contextmenu', function (event) {
            event.preventDefault(); // prevents default menu
            let el = event.target
            while (!el.dataset['path']) {
                el = el.parentNode
            }
            // $("#popupRC .showfile").css({ display: "block" })
            let path = el.dataset['path']
            let ppath = path.slice(0, path.lastIndexOf('/'))
            let type = el.dataset['type']

            // 状态
            querySelector('#popupRC .status').dataset['path'] = path
            $('#popupRC .status').css('display', 'block')

            // 导出
            querySelector('#popupRC .export').dataset['path'] = path
            $('#popupRC .export').css('display', 'block')

            // 打开
            querySelector('#popupRC .open').dataset['path'] = path
            querySelector('#popupRC .open').dataset['type'] = type
            $('#popupRC .open').css('display', 'block')

            // 移动
            querySelector('#popupRC .move').dataset['path'] = path
            $('#popupRC .move').css('display', 'block')

            // 删除
            querySelector('#popupRC .delete').dataset['path'] = ppath
            $('#popupRC .delete').css('display', 'block')

            $("#popupRC").css({ position: "absolute", top: event.pageY, left: event.pageX, display: "block" });

            document.querySelectorAll('.fileitem input').forEach(el => {
                el.checked = false
            })
            el.querySelector('input').checked = true
            querySelector('.btn-toolbar .choose').style.display = 'inline-flex'
        })
        // {% endif %}
        // {% if mode == 'edit' %}
        let edit = document.querySelector('#edit textarea')
        let view = document.querySelector('#view')
        let save = document.querySelector('#save')
        if (edit.value.length > 0) {
            view.innerHTML = text2html(edit.value);
        }
        if (edit) {
            edit.addEventListener('keyup', function (event) {
                view.innerHTML = text2html(event.target.value);
            }, false)
        }
        if (save) {
            save.addEventListener('click', function (event) {
                let content = document.querySelector('#edit').parentNode.querySelector('[name=content]').value
                let name = document.querySelector('#edit').parentNode.querySelector('[name=name]').value
                let summary = document.querySelector('#edit').parentNode.querySelector('[name=summary]').value
                let path = event.target.dataset['path']
                if (!document.querySelector('#edit').parentNode.querySelector('[name=id]')) {
                    path += '/' + name
                }
                document.querySelector('#save .spinner-border').style.display = 'inline-block'
                axios.post('{{ prefix }}/save', {
                    content: content,
                    name: name,
                    summary: summary,
                    path: path,
                })
                    .then(function (response) {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg'])
                                assign('{{ prefix }}/view?path=' + data['msg'])
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                alert(data['msg'])
                            }
                        }
                        document.querySelector('#save .spinner-border').style.display = 'none'
                    })
                    .catch(function (error) {
                        console.log(error);
                        document.querySelector('#save .spinner-border').style.display = 'none'
                    });
            }, false)
        }
        // {% endif %}
        // {% if mode == 'detail' %}
        let edit = document.querySelector('#edit textarea')
        let view = document.querySelector('#view')
        let converter = new showdown.Converter();
        let html = converter.makeHtml(edit.value);
        view.innerHTML = html;
        // {% endif %}
    </script>
    <script src="{{ static_url}}/app/main.js"></script>
    {% if mode == 'list' %}
    <script src="{{ static_url}}/app/list.js"></script>
    {% endif %}
    {% if mode == 'view' %}
    <script src="{{ static_url}}/app/view.js"></script>
    {% endif %}
    {% endblock %}